<template>
	<view class="lottery">
		<view class="topEaBg"></view>
		<view class="padding">

			<!-- <view class="total text-center padding radius text-xl text-white">总奖池：<text
					class="text-bold text-xxl text-yellow margin-right-sm">6666</text>积分</view> -->
			<view class="total text-center padding radius text-xl text-white">总奖池：完整观看<text
					class="text-bold text-xxl text-yellow margin-lr-sm">{{putongTotalNum}}</text>次</view>
		</view>
		<view>
			<view class="conl_btn" @click="submit">
				<view class="conlbtn">
					<view class="conlbtncenter">
						<view>立即参与</view>
					</view>
					<view class="conlitem"></view>
					<view class="conlitem"></view>
					<view class="conlitem"></view>
				</view>
			</view>
		</view>

		<!-- <view class="margin bg-white round padding-sm text-yellow">开奖时间：2024-05-19 20:00:00</view> -->
		<view class="margin-lr bg-white round padding-sm text-yellow">我的完整观看次数：{{putongSelfTotalNum}}。 预计获得总奖励的：{{putongSelfTotalNum}}/{{putongTotalNum}}</view>
		<!-- <view class="padding-lr text-red text-xs margin-lr-sm margin-top-xs">说明：完整观看次数越多，奖励越高</view> -->

		<view class="list-scall bg-white margin" style="border-radius: 10rpx;">
			<base-scroll-list :rowsDataProps="rowsData"></base-scroll-list>
		</view>
		<view class="rightEa">
			<view @click="ruleClick" class="cu-tag radius text-red text-bold bg-white"
				style="width: 100% ;border-radius: 50rpx 2rpx 2rpx 50rpx;">规&nbsp;&nbsp;则</view>
			<br />
			<view @click="goto('/pages/index/lottery/record/index')" class="cu-tag radius text-red text-bold bg-white margin-top"
				style="border-radius: 50rpx 2rpx 2rpx 50rpx;">中奖记录</view>
		</view>
	</view>
</template>

<script>
	import indexApi from "../../../api/new/indexApi"
	import comTitle from "../../../components/comTitle.vue"
	import baseScrollList from '@/components/baseScrollList.vue'
	let videoAd = ""
	export default {
		components: {
			comTitle,
			baseScrollList
		},
		data() {
			return {
				// 奖品列表，
				rowsData: [],
				viewInfo: {
					delay: 180, // 间隔时间
					lastSeeTime: "", // 上次看广时间
					limitNum: "", // 限制次数
					seeTotalNum: "" // 今日已观看次数
				},
				putongTotalNum: 0,
				putongSelfTotalNum: 0, // 普通抽奖自己看的总数
				prizeList: [{
						id: 'coupon88',
						name: '8.8折',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/175718/35/12595/5477/60b660c6Eb850717b/a1cfe750dcdb5b78.png',
					},
					{
						id: 'coupon900',
						Color: 'rgb(251, 219, 216)',
						name: '900',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/190845/9/6092/4489/60b65fe8Ebb8f8284/955da889f6d1c13e.png',
					},
					{
						id: 'coupon1',
						name: '1元',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/189927/14/6092/4174/60b66173E23c472ea/44af15a151defca1.png',
					},
					{
						id: 'apple',
						Color: 'rgba(246, 142, 46, 0.5)',
						name: '苹果手机',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/177670/26/4591/2514/60a25874Ee0e5332a/99c7bdfede732ae4.png'
					},
					{
						id: 'coupon210',
						name: '210元',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/124578/12/20170/4429/60b635d8E7089ebb0/7a47d76a2a260cc0.png'
					},
					{
						id: 'jd100',
						name: '100京豆',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/162790/37/15087/28046/6062a49aE8f2c10f2/5591ff0ff38a45e2.png',
					},
					{
						id: 'coupon400',
						name: '400元',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/177090/2/7001/4535/60b6607aEe9c1db2a/76c67675f547db3f.png'
					},
					{
						id: 'thanks',
						name: '谢谢参与',
						img: 'https://storage.jd.com/cdn-upload/dialTemplateHeart.png',
					}
				],
			}
		},
		onLoad() {
			// 在页面onLoad回调事件中创建激励视频广告实例
			if (wx.createRewardedVideoAd) {
				videoAd = wx.createRewardedVideoAd({
					adUnitId: 'adunit-f846fe282c59ecef'
				})
				videoAd.onLoad(() => {})
				videoAd.onError((err) => {
					console.error('激励视频光告加载失败', err)
				})
				videoAd.onClose((res) => {
					if (res && res.isEnded) {
						// 正常播放结束，可以下发游戏奖励
						console.log("正常结束", res)
						this.addPutong()
					} else {
						// 播放中途退出，不下发游戏奖励
						console.log("异常退出")
					}
				})
			}
		},
		mounted() {
			this.getDataList()
			this.getPutongTotal()
			this.getLotteryList()
		},
		methods: {
			// 获取数据
			getDataList() {
				let _rowsData = [{
					name: '1张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '2张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '3张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '4张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '5张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '6张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '7张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '8张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '9张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '10张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '11张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '12张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}]

				// 更新
				this.rowsData = _rowsData
			},
			ruleClick() {
				this.goto("/pages/index/bigTurntable/rules/index")
			},
			submit() {
				// 用户触发广告后，显示激励视频广告
				indexApi.selectTodayToal().then(res => {
					this.viewInfo = res
					const waitTime = new Date(this.viewInfo.lastSeeTime).getTime() + 180000 - new Date().getTime()
					if (waitTime > 0) {
						uni.showToast({
							title: ((waitTime / 1000).toFixed(0)) + "秒后再次观看",
							icon: "none"
						})
					} else if (this.viewInfo.seeTotalNum == this.viewInfo.limitNum) {
						uni.showToast({
							title: "今日观看次数已用完，明天再来",
							icon: "none"
						})
					} else {
						if (videoAd) {
							videoAd.show().catch(() => {
								// 失败重试
								videoAd.load()
									.then(() => videoAd.show())
									.catch(err => {
										console.error('激励视频 广告显示失败', err)
									})
							})
						}
					}
				})
				
			},
			selectTodayToal() {
				indexApi.selectTodayToal().then(res => {
					this.viewInfo = res
				})
			},
			addPutong() {
				indexApi.addPutong().then(res => {
					this.getPutongTotal()
					this.getLotteryList()
				})
			},
			getPutongTotal() {
				indexApi.selectPutongTodayToal().then(res => {
					this.putongTotalNum = Number(res.putongTotalNum)
					this.putongSelfTotalNum = Number(res.putongSelfTotalNum)
					console.log("this.putongTotalNum", this.putongTotalNum)
				})
			},
			// 获取所有人中奖列表
			getLotteryList() {
				indexApi.lotteryList({
					type: 3,
					pageSize: 1000,
					pageNum: 1
					}).then(res => {
					res.rows.map(item => {
						this.rowsData.push({
							name: '用户' + (item.userName || ''),
							time: item.createTime
						})
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.lottery {
		.total {
			border: 1px solid red;

		}

		.roundBtn {
			width: 200rpx;
			height: 200rpx;
			line-height: 200rpx;
			border: 1px solid red;
			border-radius: 100rpx;
		}

		.conlbtncenter view {
			--borderWidth: 5px;
			position: relative;
			background-color: white;
			border-radius: 50%;
			width: 180upx;
			height: 180upx;
			border-radius: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: red;
			font-weight: bold;
		}

		.conlbtncenter view:after {
			content: '';
			position: absolute;
			top: calc(-1 * var(--borderWidth));
			left: calc(-1 * var(--borderWidth));
			height: calc(100% + var(--borderWidth) * 2);
			width: calc(100% + var(--borderWidth) * 2);
			// 渐变边框颜色
			background: linear-gradient(60deg, #fa374a, #2bc271, #ff8669, #9856fc, #fad86a, #5fd9f9, #4c68ef, #6f43e4);
			border-radius: 50%;
			z-index: -1;
			animation: animatedgradient 3s ease alternate infinite;
			background-size: 300% 300%;
		}

		@keyframes animatedgradient {
			0% {
				background-position: 0% 50%;
			}

			50% {
				background-position: 100% 50%;
			}

			100% {
				background-position: 0% 50%;
			}
		}

		.conlbtn {
			position: relative;
			width: 200upx;
			height: 200upx;
			border-radius: 50%;
			margin: 50upx auto;
		}

		.conlbtn .conlbtncenter {
			position: relative;
			z-index: 2;
			font-size: 30upx;
			background: #fff;
			color: #8075ad;
			border-radius: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
		}

		@keyframes ripples {
			from {
				transform: scale(1);
				opacity: 0.6;
			}

			to {
				transform: scale(1.4);
				opacity: 0;
			}
		}

		.conlitem {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			background: red;
			border-radius: 50%;
			animation: ripples 2s 0ms linear infinite;
			z-index: 0;
		}

		.conlitem:nth-child(2n) {
			animation-delay: 0.5s;
		}

		.conlitem:nth-child(3n) {
			animation-delay: 1s;
		}

		.rightEa {
			position: absolute;
			right: 0;
			top: 100rpx;

		}
	}
</style>